<template>
	<view id="user-center">
		<view class="userImage">
			<view class="msgbox">
				<image src="../../static/images/message.png" mode=""></image>
			</view>
			<view class="userImage-avatar">

				<view class="avatar">
					<image src="../../static/logo.png" mode=""></image>
				</view>
				<view class="nickname">
					<text>二丫</text>
				</view>
				<view class="integral">
					<image src="../../static/images/king.png" mode=""></image>
					<text>会员积分1.29</text>
				</view>
			</view>


		</view>
		<!-- 第二部分 -->
		<view class="order">
			<view class="order-detail">
				<view class="order-detail-1">
					我的订单
				</view>
				<view class="order-detail-2">
					<text>全部订单</text>

				</view>

			</view>

			<view class="order-list">
				<view class="order-icon" v-for="(item,index) in icon">
					<image :src="item.iconImage"></image>
					<text>{{item.title}}</text>
				</view>

			</view>

		</view>

		<!-- 第三部分 -->
		<view class="phoneImage">
			<image src="../../static/logo.png" mode=""></image>
		</view>
		<!-- 第四部分 -->
		<scroll-view scroll-y="true" style="width: 100%;height: 322px;">
			<view class="functionList">
				<view class="functionList-item" v-for="(item,index) in FList">
					<view class="left">
						<image :src="item.iconImage" mode=""></image>
						<text>{{item.title}}</text>
					</view>
					<view class="right">
						<image src="../../static/images/ico-rigtht.png" mode=""></image>
					</view>
				</view>
			</view>
			
			<view class="line">
				
			</view>
			<view class="moreSet">
				<view class="left">
					<image src="../../static/images/repair.png"></image>
					<text>更多设置</text>
				</view>
				<view class="right">
					<image src="../../static/images/ico-rigtht.png" mode=""></image>
				</view>
			</view>
		</scroll-view>


		<view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				icon: [{
					iconImage: '../../static/images/pay.png',
					title: '待付款'
				}, {
					iconImage: '../../static/images/recive.png',
					title: '待收货'
				}, {
					iconImage: '../../static/images/evaluate.png',
					title: '待评价'
				}, {
					iconImage: '../../static/images/repair.png',
					title: '退换修'
				}],
				FList: [{
					iconImage: '../../static/images/vip-2.png',
					title: '小米会员'
				}, {
					iconImage: '../../static/images/king.png',
					title: '会员中心'
				}, {
					iconImage: '../../static/images/love.png',
					title: '服务中心'
				}, {
					iconImage: '../../static/images/home2.png',
					title: '小米之家'
				}, {
					iconImage: '../../static/images/more.png',
					title: '更多功能'
				}]
			}
		},
		methods: {

		}
	}
</script>

<style>
	#user-center {
		width: 100%;
		padding-top: 66rpx;
	}

	.userImage {
		width: 100%;
		height: 300rpx;
		border: 1rpx solid #00AAFF;
		/* background-image: url(../../static/logo.png); */
	}

	.avatar {
		width: 160rpx;
		height: 160rpx;
		border: 1rpx solid #333333;
		border-radius: 50%;
		overflow: hidden;
		display: inline-block;
		float: left;
		margin-top: 29rpx;
		margin-left: 40rpx;

	}

	.avatar image {
		width: 100%;
		height: 100%;
	}

	.msgbox {
		overflow: hidden;
	}

	.msgbox image {
		width: 60rpx;
		height: 60rpx;
		float: right;
	}

	.userImage-avatar {
		border: #00AAFF rpx solid;
		width: 100%;
		height: 100%;
		display: inline-block;


	}

	.nickname {
		/* width: 60rpx; */
		height: 160rpx;
		line-height: 160rpx;
		color: #007AFF;
		margin-left: 30rpx;
		display: inline-block;
		float: left;
		margin-top: 29rpx;
	}

	.integral {
		width: 300rpx;
		display: inline-block;
		height: 60rpx;
		background-color: #007AFF;
		border-radius: 30rpx 0rpx 0rpx 30rpx;
		float: right;
		margin-top: 138rpx;
	}

	.integral image {
		width: 60rpx;
		height: 60rpx;
		line-height: 60rpx;
		vertical-align: bottom;
	}

	.integral text {
		line-height: 50rpx;
		font-size: 28rpx;
	}

	.order {
		width: 100%;
		height: 250rpx;
		border: #007AFF 1rpx solid;
		box-sizing: border-box;
		padding: 20rpx;
	}

	.order .order-detail {
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;


	}

	.order-detail-1 {
		font-weight: bolder;
	}

	.order-detail-2 {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #CCCCCC;
	}

	.order-list {

		width: 100%;
		border: #007AFF 1rpx solid;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 25rpx 0rpx;
		margin-top: 20rpx;
	}

	.order-icon {
		width: 100rpx;
		height: 100rpx;
		border: 1rpx solid #007AFF;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.order-icon image {
		display: block;
		width: 60rpx;
		height: 60rpx;
	}

	.order-icon text {
		display: block;
	}

	.phoneImage {
		width: 100%;
		height: 300rpx;
		border: 1px solid #007AFF;
	}

	.phoneImage image {
		width: 100%;
		height: 100%;
	}

	.functionList {
		width: 100%;
		
	}

.functionList-item{
	border: 1rpx solid #999999;

}
	.functionList-item , .moreSet{
		width: 100%;
		

		/* border: #007AFF solid 1rpx; */
		box-sizing: border-box;
		height: 100rpx;
		line-height: 100rpx;
		padding: 30rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;



	}

	.functionList-item .left, .moreSet .left{
		/* float: left; */
		display: flex;
		justify-content: flex-start;
		align-items: center;
		/* border: #007AFF 1rpx solid; */


	}

	.functionList-item .left image, .moreSet .left image{
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;

	}

	/* .functionList-item .right,.moreSet .right {
		float: right; */
		/* border: #007AFF 1rpx solid; */
	/* } */

	.functionList-item .right image,.moreSet .right image{
		width: 40rpx;
		height: 40rpx;

	}
	.line{
		width: 100%;
		height: 10rpx;
		
		background-color: #CCCCCC;
	}
</style>
